import Dialog from './Dialog.vue'
import {createApp, h} from "vue";

export const openDialog = (options) => {
    const {title, content, ok, cancel} = options
    const div = document.createElement('div')
    document.body.appendChild(div)
    const close = () => {
        // @ts-ignore
        app.unmount(div)
        div.remove()
    }
    const app = createApp({
        // 误区：认为先销毁在创建
        // 写的的顺序和执行的顺序不一样，要render才会执行
        render() {
            // 这里 h 函数的使用 需要掌握和理解 三个参数的使用
            return h(Dialog, {
                visible: true,
                'onUpdate:visible': (newVisible) => {
                    if (newVisible === false) {
                        close()
                    }
                },
                ok, cancel
            }, {
                title,
                content
            })
        }
    })
    app.mount(div)
}
